

import React, { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import styles from './styles.module.css';

const UserAgreementPage: React.FC = () => {
  const navigate = useNavigate();
  const [globalSearchValue, setGlobalSearchValue] = useState('');

  useEffect(() => {
    const originalTitle = document.title;
    document.title = '用户协议 - 学途';
    return () => { document.title = originalTitle; };
  }, []);

  const handleGlobalSearchKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      const searchTerm = globalSearchValue.trim();
      if (searchTerm) {
        navigate(`/course-list?search=${encodeURIComponent(searchTerm)}`);
      }
    }
  };

  const handleNotificationsClick = () => {
    navigate('/messages');
  };

  return (
    <div className={styles.pageWrapper}>
      {/* 顶部导航栏 */}
      <header className="bg-white shadow-sm border-b border-border-light fixed top-0 left-0 right-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo和网站名称 */}
            <div className="flex items-center space-x-3">
              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                <i className="fas fa-graduation-cap text-white text-lg"></i>
              </div>
              <span className="text-xl font-bold text-text-primary">学途</span>
            </div>
            
            {/* 主导航菜单 */}
            <nav className="hidden md:flex items-center space-x-8">
              <Link to="/home" className="text-text-secondary hover:text-primary py-1 transition-colors">首页</Link>
              <Link to="/course-list" className="text-text-secondary hover:text-primary py-1 transition-colors">课程中心</Link>
              <Link to="/about-us" className="text-text-secondary hover:text-primary py-1 transition-colors">关于我们</Link>
              <Link to="/help-center" className="text-text-secondary hover:text-primary py-1 transition-colors">帮助中心</Link>
            </nav>
            
            {/* 搜索框 */}
            <div className="hidden lg:flex items-center">
              <div className="relative">
                <input 
                  type="text" 
                  placeholder="搜索课程、讲师..." 
                  value={globalSearchValue}
                  onChange={(e) => setGlobalSearchValue(e.target.value)}
                  onKeyPress={handleGlobalSearchKeyPress}
                  className="w-64 pl-10 pr-4 py-2 border border-border-light rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                />
                <i className="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
              </div>
            </div>
            
            {/* 用户菜单 */}
            <div className="flex items-center space-x-4">
              <button 
                onClick={handleNotificationsClick}
                className="relative p-2 text-text-secondary hover:text-primary transition-colors"
              >
                <i className="fas fa-bell text-lg"></i>
                <span className="absolute -top-1 -right-1 w-3 h-3 bg-danger rounded-full"></span>
              </button>
              
              {/* 未登录状态 */}
              <div className="flex items-center space-x-3">
                <Link to="/login" className="px-4 py-2 text-text-secondary hover:text-primary transition-colors">登录</Link>
                <Link to="/register" className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">注册</Link>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div className="flex pt-16">
        {/* 左侧菜单 */}
        <aside className="w-64 bg-white border-r border-border-light min-h-screen">
          <nav className="p-4">
            <ul className="space-y-2">
              <li>
                <Link to="/home" className={`${styles.sidebarLink} flex items-center space-x-3 px-4 py-3 text-text-secondary rounded-lg transition-colors`}>
                  <i className="fas fa-home text-lg"></i>
                  <span>首页</span>
                </Link>
              </li>
              <li>
                <Link to="/course-list" className={`${styles.sidebarLink} flex items-center space-x-3 px-4 py-3 text-text-secondary rounded-lg transition-colors`}>
                  <i className="fas fa-book text-lg"></i>
                  <span>课程中心</span>
                </Link>
              </li>
              <li>
                <Link to="/personal-center" className={`${styles.sidebarLink} flex items-center space-x-3 px-4 py-3 text-text-secondary rounded-lg transition-colors`}>
                  <i className="fas fa-user text-lg"></i>
                  <span>个人中心</span>
                </Link>
              </li>
              <li>
                <Link to="/about-us" className={`${styles.sidebarLink} flex items-center space-x-3 px-4 py-3 text-text-secondary rounded-lg transition-colors`}>
                  <i className="fas fa-info-circle text-lg"></i>
                  <span>关于我们</span>
                </Link>
              </li>
              <li>
                <Link to="/help-center" className={`${styles.sidebarLink} flex items-center space-x-3 px-4 py-3 text-text-secondary rounded-lg transition-colors`}>
                  <i className="fas fa-question-circle text-lg"></i>
                  <span>帮助中心</span>
                </Link>
              </li>
              <li>
                <Link to="/privacy-policy" className={`${styles.sidebarLink} flex items-center space-x-3 px-4 py-3 text-text-secondary rounded-lg transition-colors`}>
                  <i className="fas fa-shield-alt text-lg"></i>
                  <span>隐私政策</span>
                </Link>
              </li>
              <li>
                <Link to="/user-agreement" className={`${styles.sidebarLink} ${styles.sidebarLinkActive} flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors`}>
                  <i className="fas fa-file-contract text-lg"></i>
                  <span>用户协议</span>
                </Link>
              </li>
            </ul>
          </nav>
        </aside>

        {/* 主内容区域 */}
        <main className="flex-1 min-w-0">
          <div className="max-w-4xl mx-auto px-6 py-8">
            {/* 页面头部 */}
            <div className="mb-8">
              <nav className="text-sm text-text-secondary mb-4">
                <Link to="/home" className="hover:text-primary transition-colors">首页</Link>
                <span className="mx-2">/</span>
                <span className="text-text-primary">用户协议</span>
              </nav>
              <h1 className="text-3xl font-bold text-text-primary">用户协议</h1>
              <p className="text-text-secondary mt-2">最后更新时间：2024年1月15日</p>
            </div>

            {/* 用户协议内容 */}
            <div className="bg-white rounded-xl shadow-card p-8">
              <div className="space-y-8">
                {/* 协议前言 */}
                <section>
                  <p className="text-text-secondary leading-relaxed mb-6">
                    欢迎使用学途在线学习平台！本用户协议（以下简称"协议"）是您与学途教育科技有限公司（以下简称"学途"）之间关于使用学途平台服务的法律协议。请您在使用本平台服务前仔细阅读本协议的全部条款。
                  </p>
                  <p className="text-text-secondary leading-relaxed">
                    当您点击"同意"按钮或开始使用本平台服务时，即表示您已经阅读、理解并同意接受本协议的全部条款。如果您不同意本协议的任何条款，请立即停止使用本平台服务。
                  </p>
                </section>

                {/* 第一条：服务条款的确认和接纳 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">第一条 服务条款的确认和接纳</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>1.1 学途平台的各项电子服务的所有权和运作权归学途教育科技有限公司所有。</p>
                    <p>1.2 用户同意所有服务条款并完成注册程序，才能成为学途平台的正式用户。</p>
                    <p>1.3 用户确认：在注册成为学途用户时，应当向学途提供准确、完整、真实的个人信息。</p>
                    <p>1.4 学途保留在任何时候修改或中断服务的权利，无需对用户或第三方负责。</p>
                  </div>
                </section>

                {/* 第二条：服务简介 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">第二条 服务简介</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>2.1 学途平台运用自己的操作系统通过国际互联网络为用户提供在线课程学习服务。</p>
                    <p>2.2 用户必须：</p>
                    <ul className="list-disc list-inside ml-4 space-y-2">
                      <li>自行配备上网的所需设备，包括个人电脑、调制解调器或其他必备上网装置。</li>
                      <li>自行负担个人上网所支付的与此服务有关的电话费用、网络费用。</li>
                    </ul>
                    <p>2.3 基于学途平台所提供的网络服务的重要性，用户应同意：</p>
                    <ul className="list-disc list-inside ml-4 space-y-2">
                      <li>提供准确、完整的个人资料。</li>
                      <li>及时更新注册资料，符合及时、详尽、准确的要求。</li>
                    </ul>
                  </div>
                </section>

                {/* 第三条：用户账号 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">第三条 用户账号</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>3.1 用户有义务保证密码和账号的安全，用户利用该密码和账号所进行的一切活动引起的任何损失或损害，由用户自行承担全部责任。</p>
                    <p>3.2 用户不得将账号、密码转让或出借予他人使用。如发现他人冒用或盗用账号或密码时，应立即通知学途。</p>
                    <p>3.3 如用户忘记密码，可通过学途平台提供的找回密码功能重置密码。</p>
                    <p>3.4 用户应对其账号中的所有活动和事件承担责任。</p>
                  </div>
                </section>

                {/* 第四条：使用规则 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">第四条 使用规则</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>4.1 用户在申请使用学途平台服务时，必须向学途提供准确的个人资料，如个人资料有任何变动，必须及时更新。</p>
                    <p>4.2 用户不应在学途平台上发布任何违反国家有关法律、法规及中华人民共和国相关法律、法规的内容。</p>
                    <p>4.3 用户不得利用学途平台服务制作、复制、发布、传播以下信息：</p>
                    <ul className="list-disc list-inside ml-4 space-y-2">
                      <li>违反宪法确定的基本原则的；</li>
                      <li>危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</li>
                      <li>损害国家荣誉和利益的；</li>
                      <li>煽动民族仇恨、民族歧视，破坏民族团结的；</li>
                      <li>破坏国家宗教政策，宣扬邪教和封建迷信的；</li>
                      <li>散布谣言，扰乱社会秩序，破坏社会稳定的；</li>
                      <li>散布淫秽、色情、赌博、暴力、恐怖或者教唆犯罪的；</li>
                      <li>侮辱或者诽谤他人，侵害他人合法权益的；</li>
                      <li>含有法律、行政法规禁止的其他内容的。</li>
                    </ul>
                    <p>4.4 用户不得利用学途平台服务从事以下活动：</p>
                    <ul className="list-disc list-inside ml-4 space-y-2">
                      <li>未经允许，进入计算机信息网络或者使用计算机信息网络资源的；</li>
                      <li>未经允许，对计算机信息网络功能进行删除、修改或者增加的；</li>
                      <li>未经允许，对进入计算机信息网络中存储、处理或者传输的数据和应用程序进行删除、修改或者增加的；</li>
                      <li>故意制作、传播计算机病毒等破坏性程序的；</li>
                      <li>其他危害计算机信息网络安全的行为。</li>
                    </ul>
                  </div>
                </section>

                {/* 第五条：隐私保护 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">第五条 隐私保护</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>5.1 保护用户隐私是学途的一项基本政策，学途保证不对外公开或向第三方提供单个用户的注册资料及用户在使用服务时存储在学途的非公开内容。</p>
                    <p>5.2 以下情况除外：</p>
                    <ul className="list-disc list-inside ml-4 space-y-2">
                      <li>事先获得用户明确同意；</li>
                      <li>根据有关的法律法规要求；</li>
                      <li>按照相关政府部门的要求；</li>
                      <li>为维护社会公众的利益。</li>
                    </ul>
                    <p>5.3 关于用户个人信息保护的详细条款，请参阅《隐私政策》。</p>
                  </div>
                </section>

                {/* 第六条：知识产权 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">第六条 知识产权</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>6.1 学途平台提供的所有内容，包括但不限于文字、图片、音频、视频、图表、界面设计、版面框架、数据等均为学途或其授权方所有，受著作权法、商标法、专利法及其他相关法律法规的保护。</p>
                    <p>6.2 未经学途或相关权利人明确书面同意，用户不得复制、传播、展示、镜像、上传、下载使用上述内容。</p>
                    <p>6.3 用户上传的内容，用户保留其知识产权，但用户同意授予学途在全球范围内免费、不可撤销、永久的使用权。</p>
                  </div>
                </section>

                {/* 第七条：免责声明 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">第七条 免责声明</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>7.1 用户明确同意其使用学途平台服务所存在的风险将完全由其自己承担；因其使用学途平台服务而产生的一切后果也由其自己承担。</p>
                    <p>7.2 学途对以下情形不承担责任：</p>
                    <ul className="list-disc list-inside ml-4 space-y-2">
                      <li>因不可抗力或学途不能控制的原因造成的网络服务中断或其它缺陷；</li>
                      <li>用户通过非学途授权的方式使用本服务；</li>
                      <li>用户上传的内容被他人篡改、删除或丢失；</li>
                      <li>用户因使用本服务而遭受的任何直接或间接损失。</li>
                    </ul>
                    <p>7.3 学途不保证服务一定能满足用户的要求，也不保证服务不会中断，对服务的及时性、安全性、准确性也不作保证。</p>
                  </div>
                </section>

                {/* 第八条：服务变更、中断或终止 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">第八条 服务变更、中断或终止</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>8.1 学途保留随时修改或中断服务而不需对用户或第三方负责的权利。</p>
                    <p>8.2 用户违反本协议的规定，学途有权要求用户改正或直接采取一切必要的措施（包括但不限于删除用户发布的内容、暂停或终止用户使用服务的权利）以减轻用户不当行为造成的影响。</p>
                    <p>8.3 如因系统维护或升级的需要而需暂停网络服务，学途将尽可能事先进行通知。</p>
                  </div>
                </section>

                {/* 第九条：违约赔偿 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">第九条 违约赔偿</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>9.1 用户同意保障和维护学途及其他用户的利益，如因用户违反有关法律、法规或本协议项下的任何条款而给学途或任何其他第三人造成损失，用户同意承担由此造成的损害赔偿责任。</p>
                    <p>9.2 如用户违反本协议，导致学途遭受任何损失（包括但不限于由第三方提起的诉讼、索赔等），用户应承担相应的赔偿责任。</p>
                  </div>
                </section>

                {/* 第十条：协议修改 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">第十条 协议修改</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>10.1 学途保留随时修改本协议的权利，协议修改后，学途会在平台上公布修改后的协议内容。</p>
                    <p>10.2 如果用户不同意学途对本协议相关条款所做的修改，用户有权停止使用学途平台服务。</p>
                    <p>10.3 用户继续使用学途平台服务，则视为用户接受学途对本协议相关条款所做的修改。</p>
                  </div>
                </section>

                {/* 第十一条：法律适用 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">第十一条 法律适用</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>11.1 本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。</p>
                    <p>11.2 如双方就本协议内容或其执行发生任何争议，双方应尽量友好协商解决；协商不成时，任何一方均可向学途所在地的人民法院提起诉讼。</p>
                  </div>
                </section>

                {/* 第十二条：其他规定 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">第十二条 其他规定</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>12.1 本协议构成双方对本协议之约定事项及其他有关事宜的完整协议，除本协议规定的之外，未赋予本协议各方其他权利。</p>
                    <p>12.2 如本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，本协议的其余条款仍应有效并且有约束力。</p>
                    <p>12.3 本协议的最终解释权归学途教育科技有限公司所有。</p>
                  </div>
                </section>

                {/* 联系方式 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">联系我们</h2>
                  <div className="space-y-4 text-text-secondary leading-relaxed">
                    <p>如果您对本协议有任何疑问或建议，请通过以下方式联系我们：</p>
                    <ul className="list-none space-y-2">
                      <li className="flex items-center space-x-3">
                        <i className="fas fa-envelope text-primary"></i>
                        <span>邮箱：support@xuetu.com</span>
                      </li>
                      <li className="flex items-center space-x-3">
                        <i className="fas fa-phone text-primary"></i>
                        <span>电话：400-123-4567</span>
                      </li>
                      <li className="flex items-center space-x-3">
                        <i className="fas fa-map-marker-alt text-primary"></i>
                        <span>地址：北京市朝阳区教育科技大厦15层</span>
                      </li>
                    </ul>
                  </div>
                </section>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
};

export default UserAgreementPage;

